<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="分类">
          <category-cascader
            :categoryPath.sync="categoryPath"
          ></category-cascader>
        </el-form-item>
        <el-form-item label="品牌">
          <brand-select style="width: 160px"></brand-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input style="width: 160px" v-model="minPrice"></el-input>
          -
          <el-input style="width: 160px" v-model="maxPrice"></el-input>
        </el-form-item>
        <el-form-item label="检索">
          <el-input
            style="width: 160px"
            v-model="dataForm.key"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSkuInfo">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
      @expand-change="getSkuDetails"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          商品标题：{{ scope.row.skuTitle }}
          <br />
          商品副标题：{{ scope.row.skuSubtitle }}
          <br />
          商品描述：{{ scope.row.skuDesc }}
          <br />
          分类ID：{{ scope.row.categoryId }}
          <br />
          SpuID：{{ scope.row.spuId }}
          <br />
          品牌ID：{{ scope.row.brandId }}
          <br />
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="skuId"
        header-align="center"
        align="center"
        label="skuId"
      ></el-table-column>
      <el-table-column
        prop="skuName"
        header-align="center"
        align="center"
        label="名称"
      ></el-table-column>
      <el-table-column
        prop="skuDefaultImg"
        header-align="center"
        align="center"
        label="默认图片"
      >
        <template slot-scope="scope">
          <img
            :src="scope.row.skuDefaultImg"
            style="width: 80px; height: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="价格"
      ></el-table-column>
      <el-table-column
        prop="saleCount"
        header-align="center"
        align="center"
        label="销量"
      ></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="previewHandle(scope.row.skuId)"
          >
            预览
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="commentHandle(scope.row.skuId)"
          >
            评论
          </el-button>
          <el-dropdown
            @command="handleCommand(scope.row, $event)"
            size="small"
            split-button
            type="text"
          >
            更多
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="uploadImages">
                上传图片
              </el-dropdown-item>
              <el-dropdown-item command="seckillSettings">
                参与秒杀
              </el-dropdown-item>
              <el-dropdown-item command="reductionSettings">
                满减设置
              </el-dropdown-item>
              <el-dropdown-item command="discountSettings">
                折扣设置
              </el-dropdown-item>
              <el-dropdown-item command="memberPriceSettings">
                会员价格
              </el-dropdown-item>
              <el-dropdown-item command="stockSettings">
                库存管理
              </el-dropdown-item>
              <el-dropdown-item command="couponSettings">
                优惠劵
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import CategoryCascader from '../common/category-cascader'
import BrandSelect from '../common/brand-select'
export default {
  watch: {
    // 监听最低价、最高价只能输入数字
    minPrice: function (val) {
      this.minPrice = val.replace(/\D/g, '')
    },
    maxPrice: function (val) {
      this.maxPrice = val.replace(/\D/g, '')
    },
  },
  data() {
    return {
      catPathSub: null,
      brandIdSub: null,
      dataForm: {
        key: '',
        brandId: 0,
        categoryId: 0,
      },
      minPrice: '',
      maxPrice: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      categoryPath: [],
    }
  },
  components: {
    CategoryCascader,
    BrandSelect,
  },
  activated() {
    this.getDataList()
  },
  methods: {
    getSkuDetails(row, expand) {
      //sku详情查询
      console.log('展开某行...', row, expand)
    },
    //处理更多指令
    handleCommand(row, command) {
      console.log('~~~~~', row, command)
      if ('stockSettings' == command) {
        this.$router.push({ path: '/ware-sku', query: { skuId: row.skuId } })
      }
    },
    searchSkuInfo() {
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/product/sku-info/list'),
        method: 'post',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
        }),
        data: this.$http.adornData(
          {
            key: this.dataForm.key,
            categoryId: this.dataForm.categoryId,
            brandId: this.dataForm.brandId,
            minPrice: this.minPrice,
            maxPrice: this.maxPrice,
          },
          false
        ),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
  },
  mounted() {
    this.catPathSub = PubSub.subscribe('catPath', (msg, val) => {
      this.dataForm.categoryId = val[val.length - 1]
    })
    this.brandIdSub = PubSub.subscribe('brandId', (msg, val) => {
      this.dataForm.brandId = val
    })
  },
  beforeDestroy() {
    PubSub.unsubscribe(this.catPathSub)
    PubSub.unsubscribe(this.brandIdSub)
  }, //生命周期 - 销毁之前
}
</script>
